<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网规则管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>

    </style>
</head>
<body class="bg-light">
    <div class="container py-4">
        <!-- 主界面 -->
        <div class="main-container mx-auto bg-white rounded-3 shadow">
            <div class="row g-0">
                <!-- 规则列表 -->
                <div class="col-5 p-4">
                    <div class="d-flex justify-content-between mb-3">
                        <h5>现有规则</h5>
                        <button class="btn btn-sm btn-primary" onclick="showForm()">新建规则</button>
                    </div>
                    <div id="ruleList" class="list-group">
                        <!-- 示例规则 -->
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="mb-1">温度控制规则</h6>
                                    <div class="d-flex gap-1">
                                        <span class="badge bg-primary">温度传感器</span>
                                        <span class="badge bg-success">继电器模块</span>
                                    </div>
                                </div>
                                <small class="text-muted">2023-08-20</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 规则详情 -->
                <div class="col-7 p-4 selected-preview">
                    <div id="ruleDetail" class="h-100">
                        <h4 class="mb-4">新建规则</h4>
                        <form onsubmit="createRule(event)">
                            <div class="mb-4">
                                <label class="form-label">规则名称</label>
                                <input type="text" id="ruleName" class="form-control" required>
                            </div>
                            
                            <div class="row module-selector">
                                <div class="col-6">
                                    <label class="form-label">可选模块</label>
                                    <select id="moduleSelect" 
                                            class="form-select h-100" 
                                            multiple
                                            size="10"
                                            onchange="updateSelected()">
                                        <optgroup label="传感器类">
                                            <option value="temp">温度传感器</option>
                                            <option value="humidity">湿度传感器</option>
                                            <option value="light">光敏传感器</option>
                                        </optgroup>
                                        <optgroup label="控制器类">
                                            <option value="relay">继电器模块</option>
                                            <option value="motor">电机控制器</option>
                                        </optgroup>
                                    </select>
                                </div>
                                
                                <div class="col-6">
                                    <label class="form-label">已选模块</label>
                                    <div id="selectedModules" class="border p-2 h-100 overflow-auto">
                                        <!-- 已选模块动态插入 -->
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-4 d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-secondary" onclick="cancelCreate()">取消</button>
                                <button type="submit" class="btn btn-primary">创建规则</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
// 已选模块数据
let selectedModules = [];

// 更新已选模块显示
function updateSelected() {
    const select = document.getElementById('moduleSelect');
    const container = document.getElementById('selectedModules');
    
    selectedModules = Array.from(select.selectedOptions);
    
    container.innerHTML = selectedModules.map(option => `
        <div class="badge module-tag bg-primary p-2 mb-2 me-2">
            ${option.text}
            <span class="delete-btn ms-2" 
                  onclick="deselectModule('${option.value}')"
                  style="cursor:pointer">×</span>
        </div>
    `).join('');
}

// 取消选择单个模块
function deselectModule(value) {
    const options = document.getElementById('moduleSelect').options;
    Array.from(options).forEach(opt => {
        if(opt.value === value) opt.selected = false;
    });
    updateSelected();
}

// 创建规则
function createRule(e) {
    e.preventDefault();
    
    const ruleName = document.getElementById('ruleName').value;
    const modules = selectedModules.map(m => m.text);
    
    if(!ruleName || modules.length === 0) {
        alert('请填写规则名称并选择至少一个模块');
        return;
    }

    // 添加到规则列表
    const ruleItem = document.createElement('div');
    ruleItem.className = 'list-group-item';
    ruleItem.innerHTML = `
        <div class="d-flex justify-content-between">
            <div>
                <h6 class="mb-1">${ruleName}</h6>
                <div class="d-flex gap-1">
                    ${modules.map(m => `<span class="badge bg-primary">${m}</span>`).join('')}
                </div>
            </div>
            <small class="text-muted">${new Date().toLocaleDateString()}</small>
        </div>
    `;
    
    document.getElementById('ruleList').appendChild(ruleItem);
    resetForm();
}

// 重置表单
function resetForm() {
    document.getElementById('ruleName').value = '';
    document.getElementById('moduleSelect').selectedIndex = -1;
    updateSelected();
}

// 取消创建
function cancelCreate() {
    if(confirm('确认放弃当前编辑？')) resetForm();
}
</script>
</body>
</html>